<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
-->
<!-- 
* @desc:任务编排新增弹窗
* @fileName:Operation.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-4-15
!-->
<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { checkPassword } from "../../../../../services/common/tool";
// 接受父组件传回
const props = defineProps({
  // 角色下拉下拉值
  roleList: Array as any,
  saveUser: Function as any,
  oneUserInfo: Object,
});

const formSize: any = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  userName: "",
  password: "",
});
const labelPosition = ref("top");

/**
 * 密码验证正则
 */
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (!checkPassword(value)) {
    callback(
      new Error("密码必须包含英文大小写，数字，特殊字符，字符数量为6-20位")
    );
  } else {
    callback();
  }
};

/**
 * 定义校验规则
 */
const rules = reactive({
  userName: [{ required: true, message: "请输入用户账号", trigger: "blur" }],
  password: [{ validator: validatePass, required: true, trigger: "blur" }],
});

/**
 * 提交表单
 * @reture viod
 */
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      let saveObj = {
        password: ruleForm.password,
        userName: ruleForm.userName,
      };
      props.saveUser(saveObj);
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<template>
  <div class="operation">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      :label-position="labelPosition"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
    >
      <el-form-item label="用户账号" prop="userName">
        <el-input
          v-model="ruleForm.userName"
          size="large"
          placeholder="请输入用户账号"
        />
      </el-form-item>
      <el-form-item label="账号密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          type="password"
          size="large"
          placeholder="请输入账号密码"
        />
      </el-form-item>
      <el-form-item class="ClickButton">
        <el-button @click="submitForm(ruleFormRef)">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-form-item__label) {
  font-family: PingFang SC;
  font-weight: 700;
  color: #000000;
  font-size: 14px;
}
:deep(.el-input) {
  height: 40px;
  background-color: #ffffff;
}
:deep(.el-textarea) {
  height: 100px;
  background-color: #ffffff;
  .el-textarea__inner {
    height: 100px;
  }
}
.ClickButton {
  :deep(.el-form-item__content) {
    display: flex;
    justify-content: flex-end;
    .el-button {
      height: 40px;
      background-color: #ffffff;
      border: 1px solid;
      border-color: #cccccc;
    }
  }
}
</style>
